import React from 'react';
import {Link} from  'react-router';
import NavbarStore from '../stores/NavbarStore';
import NavbarActions from '../actions/NavbarActions';

class Navbar extends React.Component {
	constructor(props) {
		super(props);
		this.state = NavbarStore.getState();
		this.onChange = this.onChange.bind(this);
	}

	componentDidMount() {
		NavbarStore.listen(this.onChange);
		NavbarActions.getCharacterCount();

		let socket = io.connect();

		socket.on('onlineUsers', (data) => {
			NavbarActions.updateOnlineUsers(data);
		});

		$(document).ajaxStart(() => {
			NavbarActions.updateAjaxAnimation('fadeIn')
		});

		$(document).ajaxComplete(() => {
			setTimeout(() => {
				NavbarActions.updateAjaxAnimation('fadeOut');
			}, 750);
		});
	}

	componentWillUnmount() {
		NavbarStore.unlisten(this.onChange);
	}

	onChange(state) {
		this.setState(state);
	}

	handleSubmit(event) {
		event.preventDefault();

		let searchQuery = this.state.searchQuery.trim();

		if(searchQuery) {
			NavbarActions.findCharacter({
				searchQuery: searchQuery,
				searchForm: this.refs.searchForm.getDOMNode(),
				router: this.context.router
			});
		}
	}

	render() {
		return (
			<nav className='navbar navbar-default navbar-static-top'>
				<div className='navbar-header'>
					<button type='button' className='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar'>
						<span className='sr-only'>Toggle Navigiation</span>
						<span className='icon-bar'></span>
						<span className='icon-bar'></span>
						<span className='icon-bar'></span>
					</button>
					<Link to='/' className='navbar-brand'>
						<span ref='triangles' className={'triangles animated ' + this.state.ajaxAnimationClass}>
							<div className='tri invert'></div>
							<div className='tri invert'></div>
							<div className='tri'></div>
							<div className='tri invert'></div>
							<div className='tri invert'></div>
							<div className='tri'></div>
							<div className='tri invert'></div>
							<div className='tri'></div>
							<div className='tri invert'></div>
						</span>
						NEF
						<span className='badge badge-up badge-danger'>{this.state.onlineUsers}</span>
					</Link>
				</div>
				<div id='navbar' className='navbar-collapse collapse'>
					<form ref='searchForm' className='navbar-form navbar-left animated' onSubmit={this.handleSubmit.bind(this)}>
						<div className='input-group'>
							<input type='text' className='form-control' placeholder={this.state.totalCharacters + ' characters'} value={this.state.searchQuery} onChange={NavbarActions.updateSearchQuery} />
							<span className='input-group-btn'>
								<button className='btn btn-default' onClick={this.handleSubmit.bind(this)}>
									<span className='glyphicon glyphicon-search'></span>
								</button>
							</span>
						</div>
					</form>
					<ul className='nav navbar-nav'>
						<li><Link to='/'>Home</Link></li>
						<li><Link to='/stats'>Stats</Link></li>
						<li className='dropdown'>
							<a href='#' className='dropdown-toggle' data-toggle='dropdown'>Top 100 <span className='caret'></span></a>
							<ul className='dropdown-menu'>
								<li><Link to='/top'>Top Overall</Link></li>
								<li className='dropdown-submenu'>
									<Link to='/top/caldari'>Caldari</Link>
									<ul className='dropdown-menu'>
										<li><Link to='/top/caldari/achura'>Achura</Link></li>
										<li><Link to='/top/caldari/civire'>Civire</Link></li>
										<li><Link to='/top/caldari/deteis'>Deteis</Link></li>
									</ul>
								</li>
								<li className='dropdown-submenu'>
									<Link to='/top/gallente'>Gallente</Link>
									<ul className='dropdown-menu'>
										<li><Link to='/top/gallente/gallente'>Gallente</Link></li>
										<li><Link to='/top/gallente/intaki'>Intaki</Link></li>
										<li><Link to='/top/gallente/jin-mei'>Jin-Mei</Link></li>
									</ul>
								</li>
								<li className='dropdown-submenu'>
									<Link to='/top/minmatar'>Minmatar</Link>
									<ul className='dropdown-menu'>
										<li><Link to='/top/minmatar/brutor'>Brutor</Link></li>
										<li><Link to='/top/minmatar/sebiestor'>Sebiestor</Link></li>
										<li><Link to='/top/minmatar/vherokior'>Vherokior</Link></li>
									</ul>
								</li>
								<li className='dropdown-submenu'>
									<Link to='/top/amarr'>Amarr</Link>
									<ul className='dropdown-menu'>
										<li><Link to='/top/amarr/amarr'>Amarr</Link></li>
										<li><Link to='/top/amarr/ni-kunni'>Ni-Kunni</Link></li>
										<li><Link to='/top/amarr/khanid'>Khanid</Link></li>
									</ul>
								</li>
								<li className='divider'></li>
								<li><Link to='/shame'>Hall of Shame</Link></li>
							</ul>
						</li>
						<li className='dropdown'>
							<a href='#' className='dropdown-toggle' data-toggle='dropdown'>Female <span className='caret'></span></a>
							<ul className='dropdown-menu'>
								<li><Link to='/female'>All</Link></li>
								<li className='dropdown-submenu'>
									<Link to='/female/caldari'>Caldari</Link>
									<ul className='dropdown-menu'>
										<li><Link to='/female/caldari/achura'>Achura</Link></li>
										<li><Link to='/female/caldari/civire/'>Civire</Link></li>
										<li><Link to='/female/caldari/deteis'>Deteis</Link></li>
									</ul>
								</li>
								<li className='dropdown-submenu'>
									<Link to='/female/gallente'>Gallente</Link>
									<ul className='dropdown-menu'>
										<li><Link to='/female/gallente/gallente'>Gallente</Link></li>
										<li><Link to='/female/gallente/intaki'>Intaki</Link></li>
										<li><Link to='/female/gallente/jin-mei'>Jin-Mei</Link></li>
									</ul>
								</li>
								<li className='dropdown-submenu'>
									<Link to='/female/minmatar'>Minmatar</Link>
									<ul className='dropdown-menu'>
										<li><Link to='/female/minmatar/brutor'>Brutor</Link></li>
										<li><Link to='/female/minmatar/sebiestor'>Sebiestor</Link></li>
										<li><Link to='/female/minmatar/vherokior'>Vherokior</Link></li>
									</ul>
								</li>
								<li className='dropdown-submenu'>
									<Link to='/female/amarr'>Amarr</Link>
									<ul className='dropdown-menu'>
										<li><Link to='/female/amarr/amarr'>Amarr</Link></li>
										<li><Link to='/female/amarr/ni-kunni'>Ni-Kunni</Link></li>
										<li><Link to='/female/amarr/khanid'>Khanid</Link></li>
									</ul>
								</li>
							</ul>
						</li>
						<li className='dropdown'>
							<a href='#' className='dropdown-toggle' data-toggle='dropdown'>Male <span className='caret'></span></a>
							<ul className='dropdown-menu'>
								<li><Link to='/male'>All</Link></li>
								<li className='dropdown-submenu'>
									<Link to='/male/caldari'>Caldari</Link>
									<ul className='dropdown-menu'>
										<li><Link to='/male/caldari/achura'>Achura</Link></li>
										<li><Link to='/male/caldari/civire'>Civire</Link></li>
										<li><Link to='/male/caldari/deteis'>Deteis</Link></li>
									</ul>
								</li>
								<li className='dropdown-submenu'>
									<Link to='/male/gallente'>Gallente</Link>
									<ul className='dropdown-menu'>
										<li><Link to='/male/gallente/gallente'>Gallente</Link></li>
										<li><Link to='/male/gallente/intaki'>Intaki</Link></li>
										<li><Link to='/male/gallente/jin-mei'>Jin-Mei</Link></li>
									</ul>
								</li>
								<li className='dropdown-submenu'>
									<Link to='/male/minmatar'>Minmatar</Link>
									<ul className='dropdown-menu'>
										<li><Link to='/male/minmatar/brutor'>Brutor</Link></li>
										<li><Link to='/male/minmatar/sebiestor'>Sebiestor</Link></li>
										<li><Link to='/male/minmatar/vherokior'>Vherokior</Link></li>
									</ul>
								</li>
								<li className='dropdown-submenu'>
									<Link to='/male/amarr'>Amarr</Link>
									<ul className='dropdown-menu'>
										<li><Link to='/male/amarr/amarr'>Amarr</Link></li>
										<li><Link to='/male/amarr/ni-kunni'>Ni-Kunni</Link></li>
										<li><Link to='/male/amarr/khanid'>Khanid</Link></li>
									</ul>
								</li>
							</ul>
						</li>
						<li><Link to='/add'>Add</Link></li>
					</ul>
				</div>
			</nav>
		);
	}

}

Navbar.contextTypes = {
	router: React.PropTypes.func.isRequired
};

export default Navbar;